import {
  randomStr,
  randomNum
} from "@/utils/util"
import BasicWidget from "./BasicWidget"

const _getWidgetProps = (widgetProps) => {
  return widgetProps || {
    cols: "4",
    gutter: 0
  }
}

const widgetPropDescribe = {
  cols: {
    type: "number",
    name: "列数",
    min: 1,
    max: 24
  },
  gutter: {
    type: "number",
    name: "栅格间距",
    min: 0,
    max: 24,
  }
}

export default class Row extends BasicWidget {
  constructor(widgetProps) {
    super(_getWidgetProps(widgetProps), widgetPropDescribe);
    this.tag = "el-row";
    this.key = Symbol(this.tag);
    this.colSpans = this._createRandomSpans();
    // this.widgets = new Array(this.colSpans.length).fill(null);
    this.widgets = [];
    this.role = "container";
  }
  _initProps() {

  }
  /**
   * 创建 Row 组件的 html
   * @param {number} index 组件在 selectedWidgets 里的索引
   * @returns 
   */
  createWidgetHtml(index, editting) {
    return (
      `<div id=${this.id} data-role="container" data-parentid="ultrame-canvas" data-idx=${index} class="ultrame-form-item-box container" draggable="true" style="width: 100%;${editting && "height: 128px;"}">
        <${this.tag} style="width: 100%;height: 100%;">
          ${this._createColHtml(this.colSpans, editting)}
        </${this.tag}>
      </div>`
    )
  }
  /**
   * 创建 Row 组件内 Col 的 html
   * @param {number} spans 当前 Col 的栅格大小
   * @returns 
   */
  _createColHtml(spans, editting) {
    spans = spans.length ? spans : [24]
    return spans.reduce((result, cur, index) => {
      const id = randomStr(8, "ultrame", "_")
      return result +=
        `<el-col id="${id}" class="widgetContainer" data-parentid="${this.id}" data-idx=${index} :span=${cur} droppable="true" type="container">
          ${this._createWidget(this.widgets[index], index, id, editting)}
        </el-col>`
    }, "")
  }
  /**
   * 调用组件自身的 createWidgetHtml 方法
   * @param {widget} widget 组件
   * @returns 
   */
  _createWidget(widget, index, parentId, editting) {
    if (!widget) return ''
    return editting ? widget.createWidgetHtml(index, editting, parentId) : widget.createPureWidgetHtml()
  }
  _createRandomSpans() {
    const spansLen = randomNum(4, 1);
    if (spansLen === 1) return [24];
    if (spansLen === 2) return [12, 12];
    if (spansLen === 4) return [6, 6, 6, 6];
    const resultArr = [
      [6, 6, 12],
      [8, 8, 8],
      [6, 12, 6],
      [12, 6, 6],
      [6, 6, 12]
    ]
    return resultArr[randomNum(5, 0)]
  }
}